import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import Util from './../../util/util';

export default class refundCash extends Component < {} > {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
  }
  static navigationOptions = {
    headerTitle: '申请退款'
  }
  render() {
    return(
      <View>
        <View style={styles.topOrderInfo} >
          <Text>订单号：89492749</Text>
          <Text>2017-08-03 17:32</Text>
        </View>
        <View style={{ borderColor: '#F7F7F7', borderWidth: Util.pixel}} ></View>
        // 玩具基本信息
        <View style={styles.toyMsg} >
          <Image source={{uri: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2200875053,59610386&fm=27&gp=0.jpg'}} style={{width:100,height:100}} />
          <View>
            <Text style={{marginTop:20}} >玩具汽车</Text>
            <View style={{flexDirection:'row',justifyContent: 'space-between'}} >
              <Text style={{marginTop:20}} >已租：5天</Text>
              <View style={{flexDirection:'row',marginLeft:50*Util.size.width/375,marginTop:20}} >
                <Text>产生租金：</Text>
                <Text>10</Text>
                <Text>元</Text>
              </View>

            </View>
          </View>
        </View>
        <View style={{ borderColor: '#F7F7F7', borderWidth: Util.pixel*3 }} ></View>
        /**
         * 输入理由区域
         */
        <View style={styles.reasonView} >
          <TextInput
            style={{height: 120*Util.size.height/812, borderColor: '#9E9E9E', borderWidth: Util.pixel,borderRadius: 5}}
            onChangeText={(text) => this.setState({text})}
            value={this.state.text}
            multiline={true}
            placeholder='请输入您的退款理由'
          />
        </View>
        <View style={{ borderColor: '#F7F7F7', borderWidth: Util.pixel*1 }} ></View>
        /**
         * 上传图片部分
         */
        <View style={styles.uploadImg} >
          <Image source={{uri: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2200875053,59610386&fm=27&gp=0.jpg'}} style={{width:100,height:100}} />
        </View>
        /**
         * 确认提交
         */
         <TouchableOpacity style={styles.BtnStyle} onPress={this._confirmInfo.bind(this)} >
           <Text style={{margin:10,color:'#fff'}} >确认提交</Text>
         </TouchableOpacity>
      </View>
    );
  }
  _confirmInfo() {

  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  topOrderInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    padding: 5,
  },
  toyMsg: {
    flexDirection: 'row',
    backgroundColor: '#fff'
  },
  reasonView: {
    backgroundColor: '#fff',
    padding: 10,
  },
  uploadImg: {
    backgroundColor: '#fff'
  },
  BtnStyle: {
    backgroundColor: 'red',
    borderRadius: 20,
    marginTop: 100,
    padding:5,
    width: Util.size.width*0.8,
    marginLeft: Util.size.width*0.1,
    alignItems: 'center',
  },
})
